<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Inclined Plane</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="350"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    // Style
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Geometry
    const y_ground = 280;
    const x_wedge_start = 50;
    const h = 160;
    const theta_deg = 30;
    const theta_rad = theta_deg * Math.PI / 180;
    const base = h / Math.tan(theta_rad);
    
    const x_wedge_end = x_wedge_start + base;
    const y_wedge_top = y_ground - h;
    
    const block_size = 30;

    // --- Drawing Functions ---

    // 1. Draw Ground Line
    ctx.beginPath();
    ctx.moveTo(0, y_ground);
    ctx.lineTo(canvas.width, y_ground);
    ctx.stroke();

    // 2. Draw Wedge (mass M)
    ctx.beginPath();
    ctx.moveTo(x_wedge_start, y_ground);
    ctx.lineTo(x_wedge_end, y_ground);
    ctx.lineTo(x_wedge_end, y_wedge_top);
    ctx.closePath(); // Draws the hypotenuse
    ctx.stroke();

    // 3. Draw Block (mass m)
    ctx.beginPath();
    // The block is a square with its bottom-right corner approximately at the top of the wedge.
    ctx.rect(x_wedge_end - block_size, y_wedge_top - block_size, block_size, block_size);
    ctx.stroke();
    
    // 4. Draw Angle (theta)
    const arc_radius = 45;
    ctx.beginPath();
    // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    // Angles are measured from the positive x-axis.
    // Base is at PI (180 deg), hypotenuse is at PI - theta.
    // Drawing from base to hypotenuse anti-clockwise.
    ctx.arc(x_wedge_start, y_ground, arc_radius, Math.PI, Math.PI - theta_rad, true); 
    ctx.stroke();

    // 5. Draw Height (h) indicator
    const h_line_x = x_wedge_end + 60;
    ctx.beginPath();
    // Vertical line
    ctx.moveTo(h_line_x, y_wedge_top);
    ctx.lineTo(h_line_x, y_ground);
    // Top T-bar
    ctx.moveTo(h_line_x - 10, y_wedge_top);
    ctx.lineTo(h_line_x + 10, y_wedge_top);
    // Bottom arrow
    ctx.moveTo(h_line_x, y_ground);
    ctx.lineTo(h_line_x - 6, y_ground - 10);
    ctx.moveTo(h_line_x, y_ground);
    ctx.lineTo(h_line_x + 6, y_ground - 10);
    ctx.stroke();

    // --- Labels ---
    
    // Label 'M'
    ctx.fillText('M', x_wedge_start + base * 0.4, y_ground - h / 2);
    
    // Label 'm'
    ctx.fillText('m', x_wedge_end - block_size / 2, y_wedge_top - block_size - 12);

    // Label 'θ'
    ctx.fillText('θ', x_wedge_start + 40, y_ground - 20);

    // Label 'h'
    ctx.fillText('h', x_wedge_end + 30, y_ground - h / 2);

    // Caption
    ctx.font = '20px "KaiTi"'; // A common font for Chinese characters
    ctx.fillText('力图 3.18.1', canvas.width / 2, y_ground + 35);

</script>

</body>
</html>